<!--
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2022-09-14 17:15:47
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2023-02-27 10:30:47
 * @FilePath: \robot\src\views\patroling\PatrolingMap.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div data-test="patroling-map" class="w-full h-full p-3 bg-[#072232]">
    <div id="bmap" class="w-full h-full relative">
      <div
        v-show="drawingStatus"
        class="absolute z-[101] animate-pulse inset-x-0 mx-auto py-2 top-5 text-center bg-[#061b28] text-white"
      >
        绘制中：双击完成绘制，右键取消路径点
      </div>
      <div class="absolute z-[101] bottom-1 w-full text-center text-white">
        {{ pinLoactionText }}
      </div>
      <img
        class="absolute z-[101] top-0 left-0"
        src="@/assets/images/patroling/cor_lt.png"
      />
      <img
        class="absolute z-[101] bottom-0 right-0"
        src="@/assets/images/patroling/cor_rb.png"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, watch } from "vue";
import usePatrolingStore from "@/store/patroling";
import useInitMap from "./composables/useInitMap";

const patrolingData = usePatrolingStore();

const { pinLoactionText } = useInitMap(
  "AuNLV3Ix-Q1Q_y63NRNJAK-Ia0e3ZRpBf5PkdCW1F3UGVKmSfBiNqAg1MApxSU6U"
);

const drawingStatus = computed(() => patrolingData.drawingStatus);

const caritem = computed(() => patrolingData.patrolingInfo.robotid);
watch(caritem, () => {
  patrolingData.backToCenter();
});
</script>
